import React from "react";
import type { AriaDialogProps } from "react-aria";
import { useDialog } from "@react-native-aria/dialog";
import {
    Pressable,
    View,
    Text,
    StyleSheet,
    TouchableWithoutFeedback,
    Button,
} from "react-native";
import {
    OverlayContainer,
    OverlayProvider,
    useOverlayPosition,
} from "@react-native-aria/overlays";
interface DialogProps extends AriaDialogProps {
    title?: React.ReactNode;
    children: React.ReactNode;
}

export const DialogDemo = () => {
    const [isOpen, setIsOpen] = React.useState(false);
    let ref = React.useRef(null);
    return (
        <OverlayProvider>

            <View style={{ marginLeft: "auto", marginRight: "auto", marginBottom: isOpen ? 10 : 0 }}>
                <Pressable onPress={() => setIsOpen(true)}>
                    <Text>Dialog Demo Open</Text></Pressable>
                {isOpen && (
                    <OverlayContainer>
                        <CloseButton onClose={() => setIsOpen(false)}></CloseButton>
                        <Dialog targetRef={ref} title="Dialog Demo Title">
                            <View style={{ maxWidth: 300, padding: 10 }}>
                                <Text>
                                    Are you sure to delete it?
                                </Text>
                            </View>
                            <View
                                style={{
                                    padding: 10,
                                    flexDirection: "row",
                                    justifyContent: "space-around",
                                }}
                            >
                                <Button onPress={() => setIsOpen(false)} title="Yes"></Button>
                                <Button onPress={() => setIsOpen(false)} title="No"></Button>
                            </View>
                        </Dialog>
                    </OverlayContainer>
                )}
            </View>
        </OverlayProvider>
    );
};


function CloseButton(props: any) {
    return (
        <TouchableWithoutFeedback
            onPress={props.onClose}
            accessible={false}
            importantForAccessibility={"no-hide-descendants"}
        >
            <View style={StyleSheet.absoluteFill}></View>
        </TouchableWithoutFeedback>
    );
}

const Dialog = ({ title, children, targetRef, ...props }: DialogProps) => {
    let overlayRef = React.useRef(null);
    const { overlayProps } = useOverlayPosition({
        placement: "top",
        targetRef,
        overlayRef,
    });

    let ref = React.useRef(null);
    let { dialogProps, titleProps } = useDialog(props, ref);
    return (
        <View
            ref={overlayRef}
            style={{
                backgroundColor: 'white',
                position: "absolute",
                ...overlayProps.style,
                ...dialogProps
            }}
        >
            <View style={{ padding: 10, backgroundColor: "#F3F4F6", ...titleProps }}>
                <Text>{title} </Text>
            </View>
            {children}
        </View>
    );
};

